<template>
	<view>

		<view class="user-background" :style="userBackground">
			<view class="user-background-setting">
				<wd-icon name="setting" size="22px" color="rgb(51,50,50)"></wd-icon>
			</view>


			<view class="user-info">
				<userAvatar showGender :gender="Data.userInfo.gender" :size="130" :src="Data.userInfo.avatar"
					:year="Data.userInfo.birth_year" radius="50%" @click="clickUserAvatar">
				</userAvatar>
				<view class="user-base">
					<view class="user-base-username">
						<userNaem :username="Data.userInfo.username" fontSize="35rpx"></userNaem>
					</view>
					<view class="user-base-id" @click="clickCopyId">
						<text>@<text class="user-base-id-text">{{Data.userInfo.id}} </text></text>
						<wd-icon name="file-copy" size="20rpx" color="rgb(51,50,50)"></wd-icon>
						<text v-if="Data.userInfo.super_admin" class="user-super">超级管理员</text>
					</view>

					<view class="user-tags-list">

						<view class="user-tags-list-li">
							ID: {{Data.userInfo.id}}
						</view>

						<view class="user-tags-list-li">
							超级管理员
						</view>
					</view>

				</view>
				<view class="user-link" v-if="false">
					<view class="user-link-li" @click="clickToMessage">
						发送消息
					</view>
				</view>
			</view>

		</view>






		<view class="user-content">
			
			<view class="user-info-tab">
				<view class="user-info-tab-left">
					<wd-tabs v-model="tab">
						<wd-tab v-for="item in 3" :key="item" :title="`标签${item}`"></wd-tab>
					</wd-tabs>
				</view>
				<view class="user-info-tab-right">
			
				</view>
			</view>
			


			<view class="user-echart" v-if="true">
				<view class="user-echart-li" v-for="(item,index) in userEchartList">
					<text class="user-echart-li-title">{{item.title}}</text>
					<text class="user-echart-li-value">{{item.value}}</text>
					<text class="user-echart-li-increase">{{item.increase}}</text>
				</view>
			</view>

			<view class="user-active-message" v-if="false">
				<wd-notice-bar text="这是一条消息提示信息，这是一条消息提示信息，这是一条消息提示信息" prefix="warn-bold" />
			</view>

			<view class="user-manage" v-for="(d,index) in data.userOptions">
				<view class="user-manage-header">
					{{d.title}}
				</view>
				<view class="user-manage-list">
					<view class="user-manage-list-li" v-for="(m,index) in d.list" @click="clickUserOptions(m)">
						<image class="user-manage-li-image" :src="m.image" mode=""></image>
						<text class="user-manage-li-text">{{m.name}}</text>
					</view>
				</view>
			</view>

		</view>
		<wd-action-sheet v-model="Data.userAvatarActionsShow" :actions="Data.userAvatarClickActions" />
	</view>
</template>

<script setup>
	import userNaem from '@/components/user_name_text/user_name_text.vue';
	import userAvatar from '../../../../components/user_avatar/user_avatar.vue';
	import Dayjs from 'dayjs'
	import {
		reactive,
		getCurrentInstance,
		computed
	} from 'vue'
	import {
		onReady,
		onLoad
	} from "@dcloudio/uni-app"

	const userInfo = reactive({})

	const Data = reactive({
		userAvatarActionsShow: false,
		userInfo: {}
	})
	const userBackground = computed(() => {
		let background_url = Data?.userInfo?.info_background_image
		if (background_url) {
			return {
				"background": `url('${background_url}')`,
				"backgroundSize": "100% 100%",
			}
		}
	})

	const userEchartList = computed(() => {
		return [{
			title: "注册天数",
			value: "123",
			increase: "--"
		}, {
			title: "注册IP",
			value: "127.0.0.7",
			increase: "--"
		}, {
			title: "最近登录",
			value: "as",
			increase: "--"
		}, {
			title: "最近登录IP",
			value: "127.0.0.7",
			increase: "--"
		}, {
			title: "账号实名",
			value: "未实名",
			increase: "--"
		}, {
			title: "账号状态",
			value: "正常",
			increase: "--"
		}, {
			title: "在线状态",
			value: "离线",
			increase: "--"
		}, {
			title: "在线状态",
			value: "离线",
			increase: "--"
		}, {
			title: "在线状态",
			value: "离线",
			increase: "--"
		}, {
			title: "在线状态",
			value: "离线",
			increase: "--"
		}, {
			title: "在线状态",
			value: "离线",
			increase: "--"
		}, {
			title: "在线状态",
			value: "离线",
			increase: "--"
		}, ]
	})
	const RegisterDate = computed(() => {
		// 当前时间戳
		let current_time = Dayjs()
		// 用户的注册时间戳
		let register_time = Data?.userInfo?.register_time
		if (!register_time) {
			return null
		} else {
			const diff = current_time - register_time;
			const days = Math.floor(diff / (1000 * 3600 * 24));
			return days + '天'
		}
	})

	const LastLoginDate = computed(() => {
		let loginDate = Data?.userInfo?.last_login_time
		if (!loginDate) {
			return null
		} else {
			return Dayjs(loginDate).format('YYYY MM DD') // '25/01/2019'
		}
	})

	const data = reactive({

		userOptions: [{
			title: "基本管理",
			list: [{
					name: "个人信息",
					image: "https://img2.baidu.com/it/u=1241367680,2442387489&fm=253&fmt=auto&app=138&f=JPEG?w=60&h=60",
					path: "/pages/Mange/User/info/pages/project/project"
				},
				{
					name: "角色权限",
					image: "https://img1.baidu.com/it/u=1751062945,1541461839&fm=253&fmt=auto&app=138&f=JPEG?w=60&h=60",
					path: "/pages/Mange/User/info/pages/role/role"
				},
				{
					name: "密钥管理",
					image: "https://img0.baidu.com/it/u=3721485252,761542533&fm=253&fmt=auto&app=138&f=JPEG?w=60&h=60",
					path: "/pages/Mange/User/info/pages/token/token"
				},
				{
					name: "账号认证",
					image: "https://img0.baidu.com/it/u=378882111,4039141384&fm=253&fmt=auto&app=138&f=JPEG?w=60&h=60",
					path: "/pages/Mange/User/info/pages/real/real"
				},
				{
					name: "安全管理",
					image: "",
					path: "/pages/Mange/User/info/pages/real/real"
				},
				{
					name: "设备管理",
					image: "https://img0.baidu.com/it/u=3209822870,2067374399&fm=253&fmt=auto&app=138&f=JPEG?w=60&h=60",
					path: "/pages/Mange/User/info/pages/device/device"
				},
				{
					name: "地址管理",
					image: "https://img1.baidu.com/it/u=2238039037,1516771655&fm=253&fmt=auto&app=138&f=JPEG?w=60&h=60",
					path: "/pages/Mange/User/info/pages/address/address"
				},
				{
					name: "操作日志",
					image: "https://img2.baidu.com/it/u=1139747971,1249700381&fm=253&fmt=auto&app=138&f=JPEG?w=60&h=60",
					path: ""
				},
			]
		}, {
			title: "互动管理",
			list: [{
					name: "地址管理",
					image: "https://img1.baidu.com/it/u=2238039037,1516771655&fm=253&fmt=auto&app=138&f=JPEG?w=60&h=60",
					path: "/pages/Mange/User/info/pages/address/address"
				},
				{
					name: "操作日志",
					image: "https://img2.baidu.com/it/u=1139747971,1249700381&fm=253&fmt=auto&app=138&f=JPEG?w=60&h=60",
					path: ""
				},
			]
		}],

		tabs: [{
				name: "我的信息"
			},
			{
				name: "安全管理"
			},
			{
				name: "互动"
			}
		],
		userAvatarActionsShow: false,
		userAvatarClickActions: [{
				name: '拍照'
			},
			{
				name: '本地上传'
			}
		]

	})

	function clickUserOptions(item) {
		let {
			path
		} = item
		uni.navigateTo({
			url: path + "?user=" + Data.userInfo.id
		})
	}

	// 点击发送消息
	function clickToMessage() {

		let userInfo = Data.userInfo
		let {
			id
		} = userInfo

		uni.navigateTo({
			url: `/pages/Tarbar/Conversation/conversation-value?id=${id}`,
			success: res => {
				// 通过eventChannel向被打开页面传送数据
				res.eventChannel.emit('UserInfoConversation', {
					data: user
				})
			},
			fail: (error) => {
				console.log(error);
			}
		})
	}

	function clickUserAvatar() {
		Data.userAvatarActionsShow = true
	}

	function clickCopyId() {
		console.log("惦记了复制ID");
	}
	onLoad(() => {
		const instance = getCurrentInstance().proxy
		const eventChannel = instance.getOpenerEventChannel();
		// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
		eventChannel.on('UserListInfo', (pageParmas) => {
			uni.showLoading({
				title: "加载信息中"
			})
			let {
				data
			} = pageParmas
			// 首页位置
			let home_path = "/pages/Tarbar/CenterConsole/CenterConsole"
			if (!data) {
				console.log("没有数据");
				uni.navigateTo({
					url: home_path
				})
			} else {
				Data.userInfo = data
			}
			uni.hideLoading()
		})
	})
</script>

<style lang="scss" scoped>
	.user-background {
		padding: 45rpx 5%;
		padding-top: 90rpx;
		box-sizing: border-box;
	}
	.user-content {
		padding: 0rpx 0rpx;
		display: flex;
		flex-direction: column;
	}

	.user-background-setting {
		position: absolute;
		right: 50rpx;
		top: 50rpx;
		border-radius: 50%;
		width: 55rpx;
		height: 55rpx;
		background: #938e8eba;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.user-info {
		display: flex;
		flex-direction: column;
		width: 100%;
		box-sizing: border-box;
		gap: 15px
	}
	.user-info-tab {
		padding: 0rpx 0rpx;
		display: flex;
		font-size: 24rpx !important;
	}

	.user-info-tab-left {
		flex: 1;
	}

	.user-info-tab-right {
		width: 45%;
	}

	.user-base {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding-top: 8rpx;
		overflow: hidden;

		&-username {
			margin-bottom: 8rpx;
			display: flex;
			font-size: 26rpx;
			gap: 20rpx;
			font-weight: bold;
			align-items: center;
		}

		&-id {
			font-size: 20rpx;
			color: #121010;
			margin-bottom: 14rpx;
			&-text {
				/* color: skyblue; */
				margin-right: 8rpx;
			}
		}
	}

	.user-super {
		margin-left: 20rpx;
		color: orange;
	}

	.user-link {
		height: 70rpx;
		margin-left: 5%;
		display: flex;
		flex-direction: column;
		gap: 15rpx;
		width: 140rpx;
		color: white;

		&-li {
			border-radius: 10rpx;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			color: cornflowerblue;
			border: 2rpx solid cornflowerblue;
			background-color: transparent;
			transition: 200ms background-color linear;
			font-size: 22rpx;
			padding: 10rpx 4rpx;
			box-sizing: border-box;

			&:active {
				background-color: cornflowerblue;
				color: white;
			}
		}
	}

	.user-echart {
		width: 100%;
		padding: 34rpx 35rpx;
		box-sizing: border-box;
		padding-bottom: 20rpx;
		display: flex;
		flex-wrap: wrap;
		row-gap: 25rpx;

		&-li {
			width: 25%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			overflow: hidden;

			&-title {
				font-size: 20rpx;
				color: gray;
				margin-bottom: 18rpx;
			}

			&-value {
				margin-bottom: 6rpx;
				font-size: 24rpx;
			}

			&-increase {
				font-size: 18rpx;
				color: gray;
			}
		}

		&-header {
			font-size: 28rpx;
			padding: 10rpx 0rpx;
			padding-top: 22rpx;
			font-weight: bold;
			margin-bottom: 4rpx;
			display: flex;
			gap: 15rpx;
			align-items: center;
		}
	}

	.user-active-message {
		margin-left: 5%;
		width: 90%;
		margin-bottom: 30rpx;
	}

	.user-tags-list {
		display: flex;
		gap: 14rpx;
	}

	.user-tags-list-li {
		border: 1px solid #4d9ae773;
		font-size: 20rpx;
		padding: 3rpx 10rpx;
		border-radius: 30rpx;
		background: #dcdcdc;
		color: #4d9ae773;
	}

	.user-manage-header {
		padding: 20rpx 30rpx;
	}

	.user-manage-list {
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx 0rpx;
		padding-top: 30rpx;
		row-gap: 50rpx;
		margin-bottom: 20rpx;
	}

	.user-manage-list-li {
		width: 20%;
		height: 20%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 20rpx;
	}

	.user-manage-li-image {
		width: 45rpx;
		height: 45rpx;
	}

	.user-manage-li-text {
		font-size: 20rpx;
	}
</style>